<template>
  <div class="not-found-container">
    <h1>404</h1>
    <h2>页面未找到</h2>
    <p>抱歉，您正在查找的页面不存在或已被移动。</p>
    <router-link to="/index" class="back-home-link">返回首页</router-link>
  </div>
</template>

<script setup>
// 如果使用按钮方式返回，需要导入 useRouter
// import { useRouter } from 'vue-router';
// const router = useRouter();
// const goHome = () => {
//   router.push('/'); // 或者 router.replace('/')
// };
</script>

<style scoped>
.not-found-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 100px); /* 减去可能的页头页脚高度，让其垂直居中 */
  text-align: center;
  padding: 40px 20px;
  color: #333; /* 深灰色文字 */
  box-sizing: border-box;
}

h1 {
  font-size: 6rem; /* 大号 404 */
  font-weight: bold;
  color: #bdc3c7; /* 浅灰色 */
  margin: 0;
  line-height: 1;
}

h2 {
  font-size: 1.8rem;
  color: #2c3e50; /* 较深的标题色 */
  margin-top: 10px;
  margin-bottom: 15px;
}

p {
  font-size: 1rem;
  color: #7f8c8d; /* 中灰色 */
  margin-bottom: 30px;
  max-width: 400px; /* 限制段落宽度 */
}

.back-home-link,
.back-home-button {
  display: inline-block;
  padding: 12px 25px;
  font-size: 1rem;
  color: #fff;
  background-color: #3498db; /* 蓝色背景 */
  border: none;
  border-radius: 5px;
  text-decoration: none; /* 移除链接下划线 */
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.back-home-link:hover,
.back-home-button:hover {
  background-color: #2980b9; /* 深一点的蓝色 */
}

.back-home-link:active,
.back-home-button:active {
  transform: scale(0.98); /* 点击时轻微缩小 */
}
</style>